import React, {useEffect, useState} from "react";
import {useParams, useSearchParams} from "react-router";
import FileBucketApi, {FbInfo} from "@/api/web/FileBucketApi.ts";
import {Empty, Pagination, Skeleton, Spin} from "antd";
import {FbTypes, getFbViewer} from "@/pages/FbPage/BucketViewer";
import Background from "@/components/Background";
import BucketHeader, {bucketHeaderHeight} from "@/pages/FbPage/BucketHeader";
import {createStyles} from "antd-style";
import {Res, ResPage} from "@/api/objects";

const useStyles = createStyles(({css, token}) => {
    return {
        container: css`
            position: relative;
        `,
        content: css`
            height: calc(100vh - ${bucketHeaderHeight}px);
            background-color: ${token.colorBgContainer}af;
            margin-top: ${bucketHeaderHeight}px;
            overflow-y: auto;
        `,
        empty: css`
            height: calc(100vh - ${bucketHeaderHeight}px);
            width: auto;
            display: grid;
            place-content: center;
        `,
        pagination: css`
            position: fixed;
            left: 0;
            bottom: 0;
            padding: 2px 8px;
            background-color: ${token.colorBgContainer}5f;
        `
    }
})


const FbPage: React.FC = () => {
    const {id} = useParams()
    const [fbInfo, setFbInfo] = useState<FbInfo>()
    const [rerenderTrigger, setRerenderTrigger] = useState(0)
    const [searchParams, setSearchParams] = useSearchParams()
    const [current, setCurrent] = useState(1)
    const [pageSize, setPageSize] = useState(50)
    const [total, setTotal] = useState(0)
    const [pathList, setPathList] = useState<string[]>([])
    const [loading, setLoading] = useState(false)

    const dir = searchParams.get('dir')
    const virtualPage = searchParams.get('vp')
    const virtualPageIndex = searchParams.get('vpi')

    const styles = useStyles().styles

    useEffect(() => {
        if (id == null || id == "") {
            window.messageApi.error("id为空，请检查链接").then()
            return
        }
        setLoading(true)
        FileBucketApi.getFbInfoById(id).then(res => {
            setFbInfo(res.data)
        }).finally(() => {
            setLoading(false)
        })
    }, [id, rerenderTrigger]);

    const getContentTypePrefix = () => {
        if (fbInfo != null) {
            for (let type of FbTypes) {
                if (fbInfo.type == type.value) {
                    return type.contentTypePrefix
                }
            }
        }
        return undefined
    }

    useEffect(() => {
        if (fbInfo == null) {
            return
        }
        if (dir != null && dir != '' && dir != 'undefined') {
            setLoading(true)
            const doResult = (res: Res<ResPage<string>>) => {
                if (res.data.total < (current - 1) * pageSize) {
                    setCurrent(1)
                }
                if (res.data.size != pageSize || res.data.current != current) return;
                setPathList(res.data.records)
                setTotal(res.data.total)
            }

            const final = () => {
                setLoading(false)
            }

            if (virtualPage == '1' && virtualPageIndex != null && virtualPageIndex != '') {
                FileBucketApi.pageVirtualPage(
                    fbInfo.id, dir, virtualPageIndex, current, pageSize, 3, getContentTypePrefix(),
                ).then(doResult).finally(final)
            } else {
                FileBucketApi.pageFileInDirById(
                    fbInfo.id, dir, current, pageSize, getContentTypePrefix(),
                ).then(doResult).finally(final)
            }
        }
    }, [fbInfo, dir, virtualPageIndex, virtualPage, current, pageSize]);

    if (fbInfo == null) {
        return (
            <Skeleton/>
        )
    }

    return (
        <div className={styles.container}>
            <Background/>
            <BucketHeader fbInfo={fbInfo} rerenderTrigger={() => setRerenderTrigger(rerenderTrigger + 1)}/>
            {loading && <Spin fullscreen/>}
            <div className={styles.content}>
                {
                    total > 0 ?
                        <>
                            {getFbViewer(fbInfo, pathList)}
                        </>
                        :
                        <div className={styles.empty}>
                            <Empty/>
                        </div>
                }
            </div>
            <div className={styles.pagination}>
                {
                    total > pageSize &&
                    <Pagination
                        showQuickJumper
                        showSizeChanger
                        current={current}
                        pageSize={pageSize}
                        total={total}
                        onChange={(current, pageSize) => {
                            setCurrent(current)
                            setPageSize(pageSize)
                        }}
                    />
                }
            </div>
        </div>
    )
}

export default FbPage
